<!doctype html>
<html lang="zh-Hans">
	<head>
		<title>嵌入式工具集</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="专业的嵌入式开发工具集，包含欧姆定律计算器、电阻色环计算器、电容换算、功率换算和电池续航计算等功能。" />
		<!-- 引入样式 -->
		<!-- 以下为浏览器中的配置，正式 编译之后请注释掉这段-->
		<link rel="stylesheet" href="styles.css" />

		<!-- 以下为LCEDA中的配置，正式 编译之后请勿注释这段-->
		<link rel="stylesheet" href="/iframe/styles.css" />

		<!-- 内联样式 - 自定义颜色和动画 -->
		<style>
			:root {
				--color-primary: #00796b;
				--color-secondary: #004d40;
				--color-accent: #1e88e5;
				--color-danger: #d32f2f;
				--color-light: #e0f7fa;
				--color-dark: #263238;
			}
		</style>
	</head>

	<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen p-4 md:p-6 font-sans antialiased">
		<!-- 主容器 -->
		<div class="max-w-4xl mx-auto fade-in">
			<!-- 卡片容器 -->
			<div class="bg-white rounded-2xl shadow-xl overflow-hidden transform hover:shadow-2xl transition-all duration-500">
				<!-- 头部 -->
				<header class="bg-gradient-to-r from-primary to-secondary text-white p-6 md:p-8 relative overflow-hidden">
					<!-- 装饰背景 -->
					<div class="absolute top-0 right-0 w-full h-full opacity-10">
						<div class="absolute top-[-20px] right-[-20px] w-[150px] h-[150px] bg-white rounded-full"></div>
						<div class="absolute bottom-[-30px] left-[10%] w-[100px] h-[100px] bg-white rounded-full"></div>
					</div>

					<div class="relative z-10 flex flex-col md:flex-row items-center justify-between">
						<div class="flex items-center space-x-4 mb-4 md:mb-0">
							<div class="bg-white/20 p-3 rounded-full backdrop-blur-sm shadow-lg">
								<i class="fa fa-wrench text-3xl float-slow"></i>
							</div>
							<div>
								<h1 class="text-2xl md:text-[clamp(1.75rem,3vw,2.5rem)] font-bold tracking-tight">嵌入式工具集</h1>
								<p class="text-white/80 text-sm mt-1">专业、高效的电子工程计算工具</p>
							</div>
						</div>
						<div
							class="flex items-center space-x-2 bg-white/10 px-4 py-2 rounded-full backdrop-blur-sm transition-all duration-300 hover:bg-white/20"
						>
							<i class="fa fa-microchip"></i>
							<span class="font-medium">EmbeddedTools</span>
						</div>
					</div>
				</header>

				<!-- Tab导航 -->
				<nav class="border-b border-gray-200 bg-gray-50/50">
					<div class="flex overflow-x-auto scrollbar-hide">
						<button
							class="tab-btn tab-active px-6 py-4 text-sm md:text-base transition-all duration-300 whitespace-nowrap"
							data-tab="/iframe/calculators/ohm-calculator.html"
						>
							<i class="fa fa-bolt mr-2 text-accent"></i>欧姆定律
						</button>
						<button
							class="tab-btn px-6 py-4 text-sm md:text-base transition-all duration-300 whitespace-nowrap"
							data-tab="/iframe/calculators/resistance-calculator.html"
						>
							<i class="fa fa-random mr-2"></i>电阻色环
						</button>
						<button
							class="tab-btn px-6 py-4 text-sm md:text-base transition-all duration-300 whitespace-nowrap"
							data-tab="/iframe/calculators/capacitance-calculator.html"
						>
							<i class="fa fa-database mr-2"></i>电容换算
						</button>
						<button
							class="tab-btn px-6 py-4 text-sm md:text-base transition-all duration-300 whitespace-nowrap"
							data-tab="/iframe/calculators/power-calculator.html"
						>
							<i class="fa fa-plug mr-2"></i>功率换算
						</button>
						<button
							class="tab-btn px-6 py-4 text-sm md:text-base transition-all duration-300 whitespace-nowrap"
							data-tab="/iframe/calculators/battery-calculator.html"
						>
							<i class="fa fa-battery-three-quarters mr-2"></i>电池续航
						</button>
						<button
							class="tab-btn px-6 py-4 text-sm md:text-base transition-all duration-300 whitespace-nowrap"
							data-tab="/iframe/calculators/led-resistor-calculator.html"
						>
							<i class="fa fa-lightbulb mr-2 text-yellow-400 animate-pulse"></i>LED电阻
						</button>
					</div>
				</nav>

				<!-- Tab内容区域 - 支持嘉立创EDA专业版插件和标准浏览器环境 -->
				<main class="p-0 relative">
					<!-- 加载指示器 -->
					<div id="loading-indicator" class="hidden absolute inset-0 flex items-center justify-center bg-white/80 backdrop-blur-sm z-10">
						<div class="flex flex-col items-center">
							<div class="w-16 h-16 border-4 border-gray-200 border-t-accent rounded-full animate-spin mb-4"></div>
							<p class="text-gray-600 font-medium">正在加载计算器...</p>
						</div>
					</div>

					<!-- 为每个Tab创建独立的iframe容器，通过z-index控制显示 -->
					<div id="calculator-container" class="w-full h-[600px] md:h-[650px] border-0 transition-all duration-500 ease-in-out relative">
						<!-- 欧姆定律计算器容器 - 默认显示 -->
						<iframe
							id="tab-iframe-ohm"
							class="tab-iframe absolute inset-0 w-full h-full border-0 transition-all duration-500 ease-in-out z-10"
							src="/iframe/calculators/ohm-calculator.html"
							loading="lazy"
							title="欧姆定律计算器"
						></iframe>

						<!-- 电阻色环计算器容器 -->
						<iframe
							id="tab-iframe-resistance"
							class="tab-iframe absolute inset-0 w-full h-full border-0 transition-all duration-500 ease-in-out z-0 hidden"
							src="/iframe/calculators/resistance-calculator.html"
							loading="lazy"
							title="电阻色环计算器"
						></iframe>

						<!-- 电容换算计算器容器 -->
						<iframe
							id="tab-iframe-capacitance"
							class="tab-iframe absolute inset-0 w-full h-full border-0 transition-all duration-500 ease-in-out z-0 hidden"
							src="/iframe/calculators/capacitance-calculator.html"
							loading="lazy"
							title="电容换算计算器"
						></iframe>

						<!-- 功率换算计算器容器 -->
						<iframe
							id="tab-iframe-power"
							class="tab-iframe absolute inset-0 w-full h-full border-0 transition-all duration-500 ease-in-out z-0 hidden"
							src="/iframe/calculators/power-calculator.html"
							loading="lazy"
							title="功率换算计算器"
						></iframe>

						<!-- 电池续航计算器容器 -->
						<iframe
							id="tab-iframe-battery"
							class="tab-iframe absolute inset-0 w-full h-full border-0 transition-all duration-500 ease-in-out z-0 hidden"
							src="/iframe/calculators/battery-calculator.html"
							loading="lazy"
							title="电池续航计算器"
						></iframe>

						<!-- LED串联电阻计算器容器 -->
						<iframe
							id="tab-iframe-led-resistor"
							class="tab-iframe absolute inset-0 w-full h-full border-0 transition-all duration-500 ease-in-out z-0 hidden"
							src="/iframe/calculators/led-resistor-calculator.html"
							loading="lazy"
							title="LED串联电阻计算器"
						></iframe>
					</div>
				</main>

				<!-- 页脚 -->
				<footer class="bg-gray-50 p-5 text-center">
					<p class="text-gray-500 text-sm mb-2">© 2025 Embedded Tools - 嵌入式硬件实验室</p>
					<div class="flex justify-center space-x-4 mt-2">
						<a href="#" class="text-gray-400 hover:text-accent transition-colors duration-300">
							<i class="fa fa-github text-lg"></i>
						</a>
						<a href="#" class="text-gray-400 hover:text-accent transition-colors duration-300">
							<i class="fa fa-twitter text-lg"></i>
						</a>
						<a href="#" class="text-gray-400 hover:text-accent transition-colors duration-300">
							<i class="fa fa-envelope text-lg"></i>
						</a>
					</div>
				</footer>
			</div>
		</div>

		<!-- JavaScript -->
		<script>
			// Tab切换功能 - 使用多个iframe容器和z-index优先级控制显示，支持嘉立创EDA专业版插件和标准浏览器环境
			document.addEventListener('DOMContentLoaded', function () {
				const tabBtns = document.querySelectorAll('.tab-btn');
				const loadingIndicator = document.getElementById('loading-indicator');
				const calculatorContainer = document.getElementById('calculator-container');
				const tabIframes = document.querySelectorAll('.tab-iframe');

				// 映射Tab路径到对应的iframe ID
				const tabPathToIframeId = {
					'/iframe/calculators/ohm-calculator.html': 'tab-iframe-ohm',
					'/iframe/calculators/resistance-calculator.html': 'tab-iframe-resistance',
					'/iframe/calculators/capacitance-calculator.html': 'tab-iframe-capacitance',
					'/iframe/calculators/power-calculator.html': 'tab-iframe-power',
					'/iframe/calculators/battery-calculator.html': 'tab-iframe-battery',
					'/iframe/calculators/led-resistor-calculator.html': 'tab-iframe-led-resistor',
				};

				// 通过调整z-index优先级切换Tab显示的函数
				const switchTab = (calculatorPath) => {
					console.log('切换到计算器页面:', calculatorPath);

					// 显示加载指示器
					loadingIndicator.classList.remove('hidden');
					loadingIndicator.classList.add('fade-in');

					// 获取对应的iframe元素
					const targetIframeId = tabPathToIframeId[calculatorPath];
					if (!targetIframeId) {
						console.error('未找到对应的iframe ID:', calculatorPath);
						loadingIndicator.classList.add('hidden');
						return;
					}

					const targetIframe = document.getElementById(targetIframeId);
					if (!targetIframe) {
						console.error('未找到iframe元素:', targetIframeId);
						loadingIndicator.classList.add('hidden');
						return;
					}

					// 先隐藏所有iframe（设置为低z-index）
					tabIframes.forEach((iframe) => {
						iframe.style.zIndex = '0';
						iframe.style.opacity = '0';
						iframe.classList.add('hidden');
					});

					// 添加过渡效果
					targetIframe.style.opacity = '0';
					targetIframe.classList.remove('hidden');

					// 延迟一下以确保过渡效果生效
					setTimeout(() => {
						// 设置目标iframe为高z-index并显示
						targetIframe.style.zIndex = '10';
						targetIframe.style.opacity = '1';

						// 隐藏加载指示器
						setTimeout(() => {
							loadingIndicator.classList.add('hidden');
						}, 300); // 给个小延迟让用户看到过渡效果
					}, 100);
				};

				// 为每个iframe添加加载完成事件处理
				tabIframes.forEach((iframe) => {
					iframe.onload = function () {
						console.log('计算器页面加载完成:', this.src);
					};

					iframe.onerror = function () {
						console.error('计算器页面加载失败:', this.src);
					};
				});

				tabBtns.forEach((btn, index) => {
					// 添加渐入动画，错开时间
					btn.style.animationDelay = `${index * 0.1}s`;
					btn.classList.add('fade-in');

					btn.addEventListener('click', () => {
						try {
							// 移除所有激活状态
							tabBtns.forEach((b) => {
								b.classList.remove('tab-active');
								// 重置图标颜色
								const icon = b.querySelector('i');
								if (icon) icon.classList.remove('text-accent');
							});

							// 添加当前激活状态
							btn.classList.add('tab-active');
							// 设置激活状态的图标颜色
							const activeIcon = btn.querySelector('i');
							if (activeIcon) activeIcon.classList.add('text-accent');

							// 直接从data-tab获取完整路径
							const calculatorPath = btn.getAttribute('data-tab');
							console.log('选中的Tab路径:', calculatorPath);

							// 检测环境并使用z-index切换显示
							if (window.eda && typeof window.eda === 'object') {
								console.log('在嘉立创EDA专业版插件环境中，使用z-index切换显示');
							} else {
								console.log('在标准浏览器环境中，使用z-index切换显示');
							}

							// 使用z-index优先级切换Tab显示
							switchTab(calculatorPath);
						} catch (error) {
							console.error('Tab切换出错:', error);
							// 隐藏加载指示器
							loadingIndicator.classList.add('hidden');
						}
					});
				});

				// 响应式处理：在小屏幕上优化标签栏滚动体验
				const tabContainer = document.querySelector('nav > div');
				tabContainer.addEventListener('scroll', () => {
					// 可以在这里添加滚动位置指示器或其他效果
				});

				// 初始化：确保默认选中的Tab对应的iframe正确显示
				const defaultTabBtn = document.querySelector('.tab-btn.tab-active');
				if (defaultTabBtn) {
					const defaultPath = defaultTabBtn.getAttribute('data-tab');
					const defaultIframeId = tabPathToIframeId[defaultPath];
					if (defaultIframeId) {
						const defaultIframe = document.getElementById(defaultIframeId);
						if (defaultIframe) {
							defaultIframe.style.zIndex = '10';
							defaultIframe.style.opacity = '1';
							defaultIframe.classList.remove('hidden');
						}
					}
				}
			});
		</script>
	</body>
</html>
